<template>
  <s-layout title="银行卡管理">
    <view class="fask-box">
      <view class="fask-tips ss-flex ss-p-l-20 ss-p-t-30 ss-p-b-30"> 请选择银行卡 </view>
      <view
        v-for="item in cardList"
        :key="item.token_no"
        class="bg-white ss-p-22 ss-font-30 ss-flex ss-row-between"
      >
        <view>{{ item.bank_info.bank_name }}</view>
        <view class="unbind ss-font-28" @click="handleUnbind(item)">解绑</view>
      </view>
      <view class="bg-white ss-p-22 ss-font-30 ss-flex ss-row-between" @click="addBank">
        <view>添加银行卡付款</view>
        <uv-icon name="arrow-right" size="30rpx" />
      </view>
    </view>
  </s-layout>
</template>
<script setup>
import { ref, reactive } from "vue";
import { onLoad, onShow } from "@dcloudio/uni-app";
import { toast } from "@/uni_modules/uv-ui-tools/libs/function/index.js";
import sheep from "@/sheep";

const state = reactive({
  pay_fee: "", // 订单金额
  order_sn: "", // 订单编号
  order_time: "", // 订单时间
});
const cardList = ref([]); // 银行卡列表

onLoad((e) => {
  state.order_sn = e.order_sn;
  state.pay_fee = e.pay_fee;
  state.order_time = e.order_time;
});

onShow(() => {
  getBankList();
});

// 获取已绑定银行列表
const getBankList = () => {
  sheep.$api.pay.quickbuckleQuery().then((res) => {
    cardList.value = res.data.card_list;
  });
};

// 解绑银行卡
const handleUnbind = (val) => {
  uni.showModal({
    title: "提示",
    content: `确定解绑银行卡（${val.bank_info.bank_name}）？`,
    success: ({ confirm }) => {
      if (confirm) {
        sheep.$api.pay.cardUnbind({ token_no: val.token_no }).then((res) => {
          toast("解绑成功");
          getBankList();
        });
      }
    },
  });
};

// 添加银行卡
const addBank = () => {
  sheep.$router.go("/pages/pay/faskBind", {
    order_sn: state.order_sn,
    pay_fee: state.pay_fee,
    order_time: state.order_time,
  });
};
</script>

<style lang="scss" scoped>
.fask-box {
  width: 100%;
  height: 100vh;
  background: #f7f8fa;
  .fask-tips {
    color: #999;
    font-size: 28rpx;
  }
  .bg-white {
    border-bottom: 1rpx solid #e7e7e7;
  }
  .unbind {
    color: #39a3e5;
  }
}
</style>
